<template>
    <el-row class="m-adManage">
        <el-tabs v-model="adtiveTab" @tab-click="switchTab">
            <el-tab-pane label="首页" name="home"></el-tab-pane>
            <el-tab-pane label="底部工具栏" name="footer"></el-tab-pane>
            <el-tab-pane label="行情" name="adsense"></el-tab-pane>
            <el-tab-pane label="个人中心" name="person"></el-tab-pane>
        </el-tabs>
        
        <el-row class="layout-2">
            <el-col :span="15">
                <el-button icon="plus" v-show="funcBtn.addBtn" @click="addData">新增</el-button>
                <el-button icon="check" v-show="funcBtn.startupBtn" @click="modifyFunc('startup')">启用</el-button>
                <el-button icon="warning" v-show="funcBtn.disabledBtn" @click="modifyFunc('disabled')">禁用</el-button>
                <el-button icon="close" v-show="funcBtn.delBtn" @click="modifyFunc('del')">删除</el-button>
                <span>&nbsp;</span>
            </el-col>
            <el-col :span="9" class="right">
                <span class="time">最后发布时间：2017-05-22  12:00:00</span>
                <el-button type="primary" @click="search">发布</el-button>
            </el-col>
        </el-row>
        <el-row class="layout-3">
            <el-table
                    class="table"
                    :data="list"
                    ref="multipleTable"
                    highlight-current-row
                    @selection-change="selectionChange"
                    border
                    style="width: 100%"
            >
                <el-table-column 
                        show-overflow-tooltip="true"
                        type="selection"
                        label=""
                        width="50">
                </el-table-column>
                <el-table-column 
                        show-overflow-tooltip="true"
                        prop="functionId"
                        type="index"
                        label="id"
                        width="50">
                </el-table-column>
                <el-table-column
                        show-overflow-tooltip="true"
                        prop="name"
                        label="名称">
                </el-table-column>
                <el-table-column
                        show-overflow-tooltip="true"
                        prop="postionText"
                        label="位置">
                </el-table-column>
                <el-table-column
                        prop="ico"
                        label="图标">
                </el-table-column>
                <el-table-column
                        show-overflow-tooltip="true"
                        prop="link"
                        label="链接">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态">
                </el-table-column>
                <el-table-column
                        prop="sortNumber"
                        label="排序">
                </el-table-column>
                <el-table-column
                        prop="startTime"
                        label="操作">
                            <template scope="scope">
                                <el-button size="small"
                                           @click="handleEdit(scope.row)">编辑
                                </el-button>
                                <el-button size="small"
                                           @click="handleDisabled(scope.row)">禁用
                                </el-button>
                            </template>
                </el-table-column>
                <el-table-column
                        show-overflow-tooltip="true"
                        prop="updateDate"
                        label="更新时间">
                </el-table-column>
                <el-table-column
                        show-overflow-tooltip="true"
                        prop="updatePerson"
                        label="更新人">
                </el-table-column>
            </el-table>
        </el-row>
        <el-row class="layout-4">
            <el-pagination
                    class="pagination"
                    @current-change="changeCurPage"
                    :current-page="curPage"
                    :page-sizes="[20, 40, 100, 200]"
                    :page-size="20"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
        
        <!--弹窗-->
        <el-dialog title="新增" :visible.sync="dialogData.isShow" class="m-adManageDialog" size="small">
            <el-form ref="periodForm" :model="dialogData.data">
                <el-row class="row">
                    <el-col :span="4" class="label">名称（前端显示）<span class="isMust">*</span></el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-input v-model="dialogData.data"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item class="iseffective">
                            <el-switch v-model="dialogData.data.title"></el-switch>
                        </el-form-item>
                        <div class="flag">开启</div>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">位置<span class="isMust">*</span></el-col>
                    <el-col :span="10">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item>
                                    <el-select v-model="dialogData.data" class="select">
                                        <el-option label="首页弹窗广告" value="shanghai"></el-option>
                                        <el-option label="首页头部广告" value="shanghai"></el-option>
                                        <el-option label="首页中间广告" value="shanghai"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">图标</el-col>
                    <el-col :span="10">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item>
                                    <el-upload
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            :on-preview="handlePreview"
                                            :on-remove="handleRemove"
                                            :file-list="fileList2"
                                            list-type="picture">
                                        <el-button size="small" type="primary">上传</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">类型<span class="isMust">*</span></el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-radio-group v-model="dialogData.data">
                                <el-radio label="链接"></el-radio>
                                <el-radio label="页面"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">Android URL<span class="isMust">*</span></el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-input v-model="dialogData.data"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">OS URL<span class="isMust">*</span></el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-input v-model="dialogData.data"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">页面<span class="isMust">*</span></el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-input v-model="dialogData.data"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="20" :offset="4">
                        <quill-editor class="editor" ref="myTextEditor" v-model="editor.content" :config="editor.editorOption"></quill-editor>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">排序</el-col>
                    <el-col :span="2">
                        <el-form-item>
                            <el-input v-model="dialogData.data"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">备注</el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-input type="textarea" v-model="dialogData.data"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogData.isShow = false">取 消</el-button>
                <el-button type="primary" @click="changeDataList">确 定</el-button>
            </div>
        </el-dialog>

    </el-row>
</template>
<script>
    import axios from "axios";
    import cgi from "conf/cgi";
    import { quillEditor } from 'vue-quill-editor';
    let Request = {
        /* 获取table列表的接口 */
        queryList(_that){
            return axios.get(cgi.functionList, {params:{
                        type:_that.adtiveTab,
                        p: _that.curPage
                    }}).catch(error=>{
                        that.$message(error.msg);
                        return Promise.reject(error.msg);
                    });
        },
        /* 功能启用的接口 */
        passData(_that){
            const multiple = _that.multipleSelection;
            let functionIds = multiple.reduce((acc,v,i)=>{
                let result = acc+v.functionId;
                return i<multiple.length-1 ? result+',' : result;
            }, '');
            
            return axios.get(cgi.functionPass, {params:{
                        functionIds:functionIds
                    }}).catch(error=>{
                        _that.$message(error.msg);
                        return Promise.reject(error.msg);
                    });
        },
        /* 功能禁用的接口 */
        passData(_that){
            const multiple = _that.multipleSelection;
            let functionIds = multiple.reduce((acc,v,i)=>{
                let result = acc+v.functionId;
                return i<multiple.length-1 ? result+',' : result;
            }, '');
            
            return axios.get(cgi.functionPass, {params:{
                        functionIds:functionIds
                    }}).catch(error=>{
                        _that.$message(error.msg);
                        return Promise.reject(error.msg);
                    });
        }
    };
    export default {
        data(){
            return {
                adtiveTab: "home",
                multipleSelection: [],
                curPage:1,                                  // 当前页码
                total:1,                                    //总页数
                list:null,
                funcBtn:{                                   // 控制新增 启用 禁用 删除按钮是否显示
                    addBtn:true,
                    startupBtn:true,
                    disabledBtn:true,
                    delBtn:true,
                },
                dialogData: {
                    isShow: false,
                    data: {}
                },
                editor:{
                    content: '',                                // 编辑器的内容
                    editorOption: {                             // 编辑器的配置
                        // something config
                    }
                }
            }
        },
        methods:{
            /* 获取table列表数据 */
            queryList(){
                var that = this;
                Request.queryList(that).then(res=>{
                    that.list = res.data.list;
                    that.total = res.data.total;
                });
            },
            /* test */
            changeCurPage(_p){
                this.curPage = _p;
                this.queryList();
            },
            /* 刷新table */
            refreshTable(){
                this.queryList();
            },
            /* 切换tab时获取table列表数据 */
            switchTab(item){
                this.curPage=1;
                this.queryList();

                /* 控制新增 启用 禁用 删除按钮是否显示  */
                var funcBtn = this.funcBtn;
                funcBtn.addBtn=true;
                funcBtn.startupBtn=true;
                funcBtn.disabledBtn=true;
                funcBtn.delBtn=true;
                switch(item.name){
                    case "footer":
                        funcBtn.addBtn=false;
                        funcBtn.startupBtn=false;
                        funcBtn.disabledBtn=false;
                        funcBtn.delBtn=false;
                        break;
                    case "adsense":
                        funcBtn.addBtn=false;
                        funcBtn.delBtn=false;
                        break;
                }

            },
            /* 切换选中效果 */
            selectionChange(_arr){
                // console.log('selectionChange', arguments);
                this.multipleSelection = _arr;
            },
            modifyFunc(type){
                const multiple = this.multipleSelection;
                if( multiple.length===0 ){
                    this.$message({ 'message':'请选择功能', 'type':'warning' });
                    return false;
                }
                const typeMsg = {
                    "startup":"启用",
                    "disabled":"禁用",
                    "del":"删除",
                };
                let multipleText = multiple.reduce((acc,v, i)=>{
                                        return i<multiple.length-1 ? acc+v.name+',' :  acc+v.name;
                                    }, '');
                let tipText = '您即将'+typeMsg[type]+'以下'+ multiple.length +'个功能： '+multipleText;
                const h = this.$createElement;
                this.$msgbox({
                    title: typeMsg[type],
                    message:h('div',null,[
                        h('p',null,tipText),
                        h('p',{style:'padding-top:15px'}, '确定要'+typeMsg[type]+'吗？')
                    ]),
                    showCancelButton: true,
                    confirmButtonText: typeMsg[type],
                }).then(action =>{
                    console.info('action ',action);
                    if( action==='cancel' ) return false;
                    Request.passData(this).then(res=>{
                        console.log('res', res);
                    });
                });

            },
            /* 启用 */
            passData(){
                
            }
        },
        components: {
            quillEditor
        },
        created(){
            this.queryList(0);
            
        }
    }
</script>
<style lang="scss" type="text/scss" scoped>
    @import "../../../../sprites/_variable";

    .m-adManage {
        background-color: #fff;
        .layout-1 {
            padding: 15px;
            border-bottom: solid 15px $background-colorA;
        }
        .layout-2 {
            padding: 15px;
            .right {
                text-align: right;
                .time {
                    margin-right: 20px;
                    font-size: 15px;
                }
            }
        }
        .layout-3 {
            padding: 15px;
            .operated {
                text-align: center;
            }
            .minImg {
                width: auto;
                height: 50px;
                cursor: pointer;
            }
            .stateA {
                color: $color-success;
            }
            .stateB {
                color: $color-danger;
            }
        }
        .layout-4 {
            padding-left: 15px;
            margin-bottom: 15px;
        }
    }

    .m-adManageDialog {
        .imgRow {
            margin: 15px 0;
            .imgTitle {
                margin: 3px 0;
            }
            .uploadImg {
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .row {
            .iseffective {
                display: inline-block;
            }
            .flag {
                display: inline-block;
            }
            .tipmsg {
                background-color: $background-colorA;
                padding: 5px 5px 20px 5px;
            }
        }
        .select {
            width: 100%;
        }
        .label {
            text-align: right;
            padding-right: 10px;
            line-height: 36px;
            .isMust {
                padding-left: 3px;
                color: $color-danger;
            }
        }
    }
</style>